<template>
  <view class="customer-service-container">
    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">正在检测环境...</text>
    </view>
    
    <!-- H5 环境显示 Dify Chatbot -->
    <view v-else-if="isH5Env" class="h5-container">
      <iframe 
        src="http://localhost/chatbot/EUBf8DeYhsw0HLVp"
        class="dify-iframe"
        frameborder="0"
        allow="microphone"
      />
    </view>
    
    <!-- 非 H5 环境提示 -->
    <view v-else class="not-support-container">
      <text class="not-support-icon">💬</text>
      <text class="not-support-text">智能客服功能</text>
      <text class="not-support-desc">当前环境暂不支持，请使用 H5 访问</text>
    </view>
  </view>
</template>

<script setup lang="ts">
const isH5Env = ref(false);
const isLoading = ref(true);

onMounted(() => {
  // 延迟检测，确保页面完全加载
  setTimeout(() => {
    checkEnvironment();
  }, 100);
});

function checkEnvironment() {
  console.log('开始环境检测...');
  
  // 首先检查是否在浏览器环境
  if (typeof window === 'undefined') {
    console.log('非浏览器环境');
    isH5Env.value = false;
    isLoading.value = false;
    return;
  }
  
  // 检查 UserAgent 判断是否在小程序环境
  const userAgent = navigator.userAgent.toLowerCase();
  const isInMiniProgram = userAgent.includes('miniprogram') || 
                        userAgent.includes('micromessenger') ||
                        userAgent.includes('qq/') ||
                        userAgent.includes('toutiaomicroapp') ||
                        userAgent.includes('swan/') ||
                        userAgent.includes('jdmp') ||
                        userAgent.includes('xhsminiapp');
  
  console.log('UserAgent:', userAgent);
  console.log('是否在小程序环境:', isInMiniProgram);
  
  if (isInMiniProgram) {
    console.log('检测到小程序环境');
    isH5Env.value = false;
    isLoading.value = false;
    return;
  }
  
  // 检查是否在 H5 环境
  // #ifdef H5
  console.log('H5 编译环境，直接设置为 H5');
  isH5Env.value = true;
  initDifyChatbot();
  isLoading.value = false;
  // #endif
  
  // #ifndef H5
  // 使用 webUni 检测环境（如果可用）
  if (typeof (window as any).webUni !== 'undefined') {
    console.log('使用 webUni 检测环境');
    (window as any).webUni.getEnv((res: any) => {
      console.log('webUni 环境检测结果:', res);
      if (res.platform === 'web' || res.h5) {
        isH5Env.value = true;
        initDifyChatbot();
      } else {
        isH5Env.value = false;
      }
      isLoading.value = false;
    });
  } else {
    console.log('webUni 未定义，使用默认检测');
    // 默认认为是 H5 环境（因为不在小程序环境）
    isH5Env.value = true;
    initDifyChatbot();
    isLoading.value = false;
  }
  // #endif
}

function initDifyChatbot() {
  console.log('Dify Chatbot 使用 iframe 方案');
  // iframe 方案不需要额外的初始化逻辑
}
</script>

<style scoped lang="scss">
.customer-service-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  border-top: 4rpx solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 30rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: white;
}

.h5-container {
  width: 100%;
  height: 100%;
  position: relative;
}


.dify-iframe {
  width: 100%;
  height: 100%;
  min-height: 700px;
  border: none;
}

// #ifndef H5
.not-support-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60rpx;
}

.not-support-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}

.not-support-text {
  font-size: 36rpx;
  color: white;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.not-support-desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 1.5;
}
// #endif
</style>


